import React, { ReactNode } from 'react';
import { IconClear } from './svg/svgIcon';
import { Button } from '@arco-design/web-react';
import { IconSearch } from '@arco-design/web-react/icon';

interface Props {
  className?: string;
  onConfirm: () => void;
  onReset: () => void;
  children?: ReactNode;
}
export default function SearchBar({ className, children, onConfirm, onReset }: Props) {
  return (
    <div className={`search-bar d-flex-r flex-wrap ${className ?? ''}`}>
      {children}
      <div className="d-flex-r">
        <Button icon={<IconSearch />} type="primary" className="mb-20 mr-20" onClick={onConfirm}>
          搜索
        </Button>
        <Button icon={<IconClear />} type="outline" onClick={onReset}>
          清空筛选
        </Button>
      </div>
    </div>
  );
}
